<%--
  Created by IntelliJ IDEA.
  User: notyoukennk
  Date: 2022/11/16
  Time: 14:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial;
            padding: 10px;
            background:url(images/home1.jpeg) ;
            opacity: 0.8;
        }

        /* 页眉/Blog 标题 */
        .header {
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 40px;
            color: #ffffff;
        }

        /* 设置上导航栏的样式 */
        .topnav {
            overflow: hidden;
            background-color: #333;
        }

        /* 设置 topnav 链接的样式 */
        .topnav a {
            float: left;
            display: block;
            color: #150101;
            text-align: center;
            padding: 30px 20px;
            text-decoration: none;
            background-color: #ffffff;
        }

        /* 改变鼠标悬停时的颜色 */
        .topnav a:hover {
            background-color: #58ab75;
            color: #ffffff;
        }

        /* 创建两个不相等的彼此并排的浮动列 */
        /* 左列 */
        .leftcolumn {
            float: left;
            width: 75%;
        }

        /* 右列 */
        .rightcolumn {
            float: left;
            width: 25%;
            background-color: #f1f1f1;
            padding-left: 20px;
        }

        /* 伪图像 */
        .fakeimg {
            background-color: #aaa;
            width: 100%;
            padding: 20px;
        }

        /* 为文章添加卡片效果 */
        .card {
            background-color: white;
            padding: 20px;
            margin-top: 20px;
        }

        /* 清除列之后的浮动 */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* 页脚 */
        .footer {
            padding: 20px;
            text-align: center;
            background: #ddd;
            margin-top: 20px;
        }

        /* 响应式布局 - 当屏幕的宽度小于 800 像素时，使两列堆叠而不是并排 */
        @media screen and (max-width: 800px) {
            .leftcolumn, .rightcolumn {
                width: 100%;
                padding: 0;
            }
        }

        /* 响应式布局 - 当屏幕的宽度小于 400 像素时，使导航链接堆叠而不是并排 */
        @media screen and (max-width: 400px) {
            .topnav a {
                float: none;
                width: 100%;
            }
        }
        .button {
            display: inline-block;
            border-radius: 25px;
            border: none;
            text-align: center;
            font-size: 24px;
            padding: 20px;
            width: 180px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
        }
        .button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }

        .button span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

        .button:hover span {
            padding-right: 25px;
        }

        .button:hover span:after {
            opacity: 1;
            right: 0;
        }

    </style>
</head>
<body>

<div class="header">
    <h1>软件项目管理在线学习网站</h1>
</div>

<div class="topnav">
    <a href="ProjectManagement/courseintroduction.jsp" target="_top" style="height:100% ">课程介绍</a>
    <a href="Olsystem/course.jsp" target="_top">课程内容</a>
    <a href="Olsystem/team.jsp" target="_top">教学团队</a>
    <a href="ProjectManagement/TeacherLogin.jsp" target="_top" class="button" style="float:right;background-color: #f4511e;color: #FFFFFF"  ><span>登录</span></a>
    <a href="homepage.html" target="_top" class="button" style="float:right;background-color: #d5a93b;color: #150101"><span>网络测试</span></a>
    <a href="ProjectManagement/messageboard.jsp" target="_top" class="button" style="float:right;background-color: #d92c9c;color: #1d0333"  ><span>留言板</span></a>
</div>

<div class="row">
    <div class="leftcolumn">
        <div class="card">
            <h2>第三届“一带一路”医疗器械创新与应用大会在上理工举办</h2>
            <h5>Dec 8, 2022</h5>
            <div class="fakeimg" style="height:200px;">
<%--                <img src="https://bj-yuantu.fotomore.com/creative/vcg/new/VCG211374278994.jpg?Expires=1671334028&OSSAccessKeyId=LTAI2pb9T0vkLPEC&Signature=O%2FvuN1EWl3RFXzdcK2UYgneBI6Q%3D&response-content-disposition=attachment%3B%20filename%3DVCG211374278994.jpg&response-content-type=application%2Foctet-stream&x-oss-process=image%2Fauto-orient%2C1%2Fsaveexif%2C1%2Fresize%2Cm_lfit%2Ch_1024%2Cw_1024%2Climit_1%2Fsharpen%2C100%2Fquality%2CQ_100%2Fwatermark%2Cg_sw%2Cx_0%2Cy_0%2Cimage_d2F0ZXIvdmNnLW5ldy02NTAwLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSxtX2xmaXQsaF8xNDYsd18xNDYsbGltaXRfMQ%2F"--%>
<%--                     style="width:100%;min-height:20px"/>--%>
            </div>
            <p>12月7日至8日，第三届“一带一路”医疗器械创新与应用大会暨国际（上海）高端医疗装备创新大会在上海理工大学举办。大会以“协力创新医疗器械，共同守护人类健康”为主题，聚焦医疗器械前沿技术、监管科学、国际合作等重点方向，邀请国内外医疗器械行业专家学者，政府管理部门、审评机构、临床医疗机构、制造商等代表参会，共同就高端医疗装备创新发展进行交流与研讨。</p>
        </div>
    </div>
    <div class="rightcolumn">
        <div class="card">
            <h2>关于我们</h2>
            <div class="fakeimg" style="height:130px;">
                SPM-3 小组成员<br>
                <p>宋雅婷  莫群仪  阿拉依</p>
                <p>林宇雄  曹家伟  林雨泓</p>
            </div>
            <p>上海市杨浦区军工路516号</p>
        </div>
        <div class="card">
            <h3>USST</h3>

            <div class="fakeimg">
                <a href="https://www.usst.edu.cn/main.htm">点击此处前往上海理工大学</a>
            </div>
        </div>

    </div>
</div>

<div class="footer">
    <h2>软件项目管理在线学习网站 V1.2 Copyright@SPM-3</h2>
</div>

</body>
</html>
